<template>
  <div id="wai">
    <div class="shang">
      <MySwiper :imgList="imglist"></MySwiper>
    </div>
    <div class="xia">
      你感兴趣的东西都在这里
    </div>
  </div>
</template>
  
<script>
import MySwiper from '../MySwiper.vue'
export default {
  name: 'Home_page',
  data() {
    return {
      msg: 'home',
      imglist: {}
    };
  },
  components: {
    MySwiper,
  },
  methods: {
    get_img_list() {
      this.$http.get("home_img_list.php").then(res => {
        if (res.data.status == 1) {
          console.log('获取成功');
          this.imglist = res.data.imglist;
        } else {
          alert(res.data.message);
        }
      }).catch(() => {
        console.log('失败');
      });
    }
  },
  created() {
    this.get_img_list();
  }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
}
#wai {
  height: 895px;
  border: 1px solid red;
  .xia{
    margin-top: 10%;
    text-align: center;
    font-size: 50px;
  }
}
</style>
  